<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">编辑</div>
      <div class="ef-node-form-body">
        <el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
          <el-form-item label="类型">
            <el-input v-model="node.type" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="node.name" :disabled="node.readOnly"></el-input>
          </el-form-item>
          <el-form-item label="规则" v-show="node.type === 'rule'">
            <el-select v-model="node.ruler" multiple>
              <el-option
                v-for="item in baseRules"
                :key="item.name"
                :label="item.name"
                :value="item.name">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最大执行时间" v-show="node.type === 'rule'">
            <el-input-number :min="0" v-model="node.maxExecuteTime"></el-input-number>
          </el-form-item>
          <el-form-item label="拒绝后是否继续执行" v-show="node.type === 'rule'">
            <el-select v-model="node.refuseThenContinue">
              <el-option label="是" :value="1"/>
              <el-option label="否" :value="2"/>
            </el-select>
          </el-form-item>

          <el-form-item label="运行方式" v-show="node.type === 'process-divide'">
            <el-select v-model="node.runType" placeholder="运行方式">
              <el-option label="并行" value="parallel"></el-option>
              <el-option label="串行" value="serial"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
          </el-form-item>
        </el-form>

        <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
          <el-form-item label="条件">
            <el-input v-model="line.label"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-close">重置</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import {cloneDeep} from 'lodash'

export default {
  props: {
    baseRules: {
      type: Array
    }
  },
  data() {
    return {
      visible: true,
      // node 或 line
      type: 'node',
      node: {
        maxExecuteTime: 0
      },
      line: {},
      data: {}
    }
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = 'node'
      this.data = data
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node)
        }
      })
    },
    lineInit(line) {
      this.type = 'line'
      this.line = line
    },
    // 修改连线
    saveLine() {
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
    },
    save() {
      this.data.nodeList.filter((node) => {
        if (node.id === this.node.id) {
          node.name = this.node.name
          if (node.type === 'process-divide') {
            if (this.node.runType === 'parallel') {
              node.name = "裂开了（并行）"
            } else {
              node.name = "裂开了（串行）"
            }
          }
          node.ruler = this.node.ruler
          node.runType = this.node.runType
          node.maxExecuteTime = this.node.maxExecuteTime
          this.$emit('repaintEverything')
        }
      })
    }
  }
}
</script>
